<template lang="pug">
.message
  .message-container
    .message-title 消息回复
    .message-body(v-if="comments.length")
      .message-item(v-for="item in comments")
        .message-item-detail
          .detail-row
            .detail-row-label 产品名称：
            .detail-row-bd {{item.baseInformation.demandName}}
          .detail-row
            .detail-row-label 项目类型：
            .detail-row-bd {{item.baseInformation.projectType}}
          .detail-row
            .detail-row-label 需求分类：
            .detail-row-bd {{item.baseInformation.demandParentCategory}}/{{item.baseInformation.demandChildCategory}}
          .detail-row
            .detail-row-label 采购数量：
            .detail-row-bd {{item.baseInformation.demandNums}}
          .detail-row.detail-row-start
            .detail-row-label 需求图片：
            .detail-row-bd.detail-row-bd-flex
              .detail-row-img(v-for="img in item.imgUrlList")
                .detail-row-img-bd(:style="{ 'background-image': `url(${img})` }" @click="preview(img)")
        .message-item-comment
          .comment-item(v-for="row in item.comment")
            .comment-item-head(:style="{ 'background-image': `url(${row.headImage || defaultImg})` }")
            .comment-item-bd
              .comment-item-name {{row.fromUser}}
              .comment-item-desc {{row.commentContext}}
              .comment-item-ft
                .comment-item-time {{row.commentTime | filterDate}}
                .comment-item-handle(@click="commentRow(row, item)")
                  .iconfont.icon-edit
                  span 回复
              .comment-children
                .children-item(v-for="child in row.children")
                  .comment-item-head(:style="{ 'background-image': `url(${child.headImage || defaultImg})` }")
                  .comment-item-bd
                    .comment-item-name {{child.fromUser}}
                    .comment-item-desc
                      label 回复了{{child.toUser}}：
                      span {{child.commentContext}}
                    .comment-item-ft
                      .comment-item-time {{child.commentTime | filterDate}}
                      .comment-item-handle
                        .iconfont.icon-edit
                        span 回复
    .message-empty(v-else)
      img(src="../../static/images/empty.png")
      .message-empty-txt 这里空空如也~~
  comment-modal(:show="showDialog", :currentItem="currentItem", :materialId="materialId" @close="closeDialog" @success="successDialog")
</template>

<script>
import { getCommentList } from 'api'
import commentModal from '@/components/modal/commentModal'
import { mapActions } from 'vuex'
export default {
  name: 'message',
  components: {
    commentModal
  },
  data () {
    return {
      defaultImg: 'http://192.168.2.55:1292/Material/static_files/images/head.png',
      page: 1,
      pageSize: 20,
      comments: [],
      isLoading: false,
      isLoaded: false,
      showDialog: false,
      currentItem: {},
      materialId: ''
    }
  },
  methods: {
    ...mapActions([
      'changePreviewModal'
    ]),
    async getList () {
      try {
        const { ResultSet } = await this.$axios.post(getCommentList, { content: { currentPage: this.page, pageLines: this.pageSize } })
        // ResultSet.userData.comments.forEach(item => {
        //   if (item.baseInformation.imageUrls) {
        //     item.baseInformation.imageUrls = item.baseInformation.imageUrls.split(',')
        //   }
        // })
        if (ResultSet.userData.comments.length) this.page += 1
        this.comments = ResultSet.userData.comments
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async loadMore () {
      try {
        const { scrollTop, scrollHeight, clientHeight } = this.$parent.$parent.$refs.appView
        if (scrollTop < scrollHeight - clientHeight - 100) return
        if (this.isLoading || this.isLoaded) return
        this.isLoading = true
        const { ResultSet } = await this.$axios.post(getCommentList, { content: { currentPage: this.page, pageLines: this.pageSize } })
        ResultSet.userData.comments.forEach(item => {
          if (item.baseInformation.imageUrls) {
            item.baseInformation.imageUrls = item.baseInformation.imageUrls.split(',')
          }
        })
        this.comments = [...this.comments, ...ResultSet.userData.comments]
        if (!ResultSet.userData.comments.length) this.isLoaded = true
        else this.page += 1
        this.$nextTick(() => {
          this.isLoading = false
        })
      } catch (err) {
        this.$message.error(err.msg)
      }
    },
    preview (url) {
      this.changePreviewModal({ show: true, url: url })
    },
    commentRow (row, item) {
      this.showDialog = true
      this.currentItem = row
      this.materialId = item.baseInformation.id
    },
    closeDialog () {
      this.showDialog = false
      this.currentItem = {}
    },
    successDialog () {
      this.showDialog = false
      this.currentItem = {}
      this.getDetail()
    },
  },
  mounted () {
    let scrollEle = this.$parent.$parent.$refs.appView
    scrollEle.addEventListener('scroll', this.loadMore)
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
    })
  },
  beforeRouteLeave (to, from, next) {
    let scrollEle = this.$parent.$parent.$refs.appView
    scrollEle.removeEventListener('scroll', this.loadMore)
    next()
  }
} 
</script>

<style lang="scss" scoped>
.message {
  padding: 0 32px 16px;
}
.message-container {
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
}
.message-title {
  padding-bottom: 24px;
  border-bottom: 1px solid #CBCBCB;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.message-body {
  margin-top: 25px;
}
.message-item {
  background: #FFFFFF;
  border: 1px solid #CBCBCB;
  border-radius: 4px;
  margin-bottom: 16px;
}
.message-item-detail {
  padding: 30px;
  background: #F3F3F3;
  border-radius: 4px 4px 0px 0px;
}
.detail-row-img {
  display: flex;
}
.detail-row-img-bd {
  width: 96px;
  height: 96px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  &.detail-row-start {
    align-items: flex-start;
  }
  .detail-row-label {
    width: 100px;
    padding-right: 20px;
    color: #A1A1A1;
    font-size: 14px;
    text-align: right;
  }
  .detail-row-value {
    font-size: 14px;
    color: #363636;
  }
}
.message-item-comment {
  padding: 0 30px;
}
.detail-row-bd-flex {
  display: flex;
  flex-wrap: wrap;
}
.comment-item {
  padding: 32px 0;
  display: flex;
  border-bottom: 1px solid #C7C7C7;
  &:last-child {
    border-bottom: none;
  }
}
.comment-item-head {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.comment-item-bd {
  margin-left: 20px;
  flex: 1;
}
.comment-item-name {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.comment-item-desc {
  margin-top: 10px;
  font-size: 14px;
  span {
    color: #666666;
    word-break: break-all;
  }
  label {
    font-weight: bold;
    color: #363636;
    
  }
}
.comment-item-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.comment-item-time {
  font-size: 14px;
  color: #999999;
}
.comment-item-handle {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #363636;
  cursor: pointer;
  .iconfont {
    margin-right: 10px;
  }
}
.comment-children {
  margin-top: 30px;
}
.children-item {
  display: flex;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #F3F3F3;
}
.message-empty {
  padding: 100px 0;
  text-align: center;
  .message-empty-txt {
    color: #888A8D;
    margin-top: 10px;
    font-size: 14px;
  }
}
</style>
